<script lang="ts" setup>
	import { ref, reactive, inject, toRefs } from "vue";
	import {
		onLoad,
		onUnload
	} from '@dcloudio/uni-app';
	import {
		getCurrentInstance
	} from 'vue'
	import {
		userStore
	} from '@/pinia';
	import {
		useRouter
	} from 'uni-mini-router';
	const {
		proxy,
	} = getCurrentInstance()
	const userStoreInfo = userStore();
	let router = useRouter()
	let flag = ref()
	let orderId = ref()
	let orderDetail = ref(null)
	onLoad((option) => {
		console.log(option);
		orderId.value = option.id
		flag.value = option.data
		getDetail()
		if (option.data == 'no') {
			uni.setNavigationBarTitle({
				title: '拒绝买家申请',
			})
		} else {
			uni.setNavigationBarTitle({
				title: '同意买家申请',
			})
		}
	})
	onUnload(() => {
		uni.$off('choseAddressGys')
	})
	const getDetail = () => {
		//获取详情
		proxy.$req('GET', proxy.$api.gysOrderDetail, {
			id: orderId.value,
		}).then((res) => {
			console.log(res);
			orderDetail.value = res.result
		})
	}
	const afterRead = (e) => {
		console.log(e);
		const item = e.file;
		uni.showLoading({
			title: '上传中',
		})
		for (let a = 0; a <= item.length; a++) {
			uni.uploadFile({
				url: proxy.$uploadUrl + proxy.$api.uploadFile,
				filePath: item[a].url,
				name: 'file',
				formData: {
					file: item[a].url,
				},
				success: (uploadFileRes) => {
					console.log(JSON.parse(uploadFileRes.data));
					if (!JSON.parse(uploadFileRes.data).success) {
						uni.showToast({
							title: JSON.parse(uploadFileRes.data).message,
							icon: 'none'
						})
						return
					}
					let result = JSON.parse(uploadFileRes.data).result
					// console.log(result, 'result');
					uni.hideLoading()
					jujueObj.img.push(
						// item[a]
						Object.assign({}, {
							// status: 'success',
							// message: '上传成功',
							url: result,
						})
					);
					console.log(jujueObj.img);
				},
				complete() { }
			});
		}
	}
	const deletePic = (e) => {
		jujueObj.img.splice(e.index, 1)
	}
	const backPage = () => {
		router.back()
	}
	const jujue = () => {
		if (jujueObj.yunayin == '') {
			uni.$u.toast('请选择原因')
			return
		} else if (jujueObj.buchong == '') {
			uni.$u.toast('请补充原因')
			return
		} else if (jujueObj.img.length == 0) {
			uni.$u.toast('请上传图片')
			return
		}
		//拒绝退货申请
		proxy.$req('POST', proxy.$api.tuikuanControls, {
			orderId: orderId.value,
			refuseReason: jujueObj.yunayin,
			refusePicList: JSON.stringify(jujueObj.img),
			refuseRemark: jujueObj.buchong,
			refundStatus: -2
		}).then((res) => {
			uni.$u.toast(res.message)
			if (res.success) {
				router.back()
			}
		})
	}
	let jujueObj = reactive({
		yunayin: '',
		buchong: '',
		img: []
	})
	const showYuanyin = () => {
		let arr = ['买家理由不充分', '买家故意捣乱', '商品有损坏', '买家不承担运费'];
		uni.showActionSheet({
			itemList: arr,
			success(e) {
				console.log(e);
				jujueObj.yunayin = arr[e.tapIndex]
			}
		})
	}
	let tongyiMsg = ref()
	const tongyi = () => {
		//同意退款申请
		proxy.$req('POST', proxy.$api.tuikuanControls, {
			orderId: orderId.value,
			refundStatus: 2,
			applyRemark: tongyiMsg.value
		}).then((res) => {
			uni.$u.toast(res.message)
			if (res.success) {
				router.back()
			}
		})
	}
	const editAddress = (data) => {
		//选择完地址设置为默认地址
		proxy.$req('POST', proxy.$api.editAddress, {
			id: data.id,
			memberId: userStoreInfo.userInfo.id,
			realName: data.realName,
			phone: data.phone,
			province: data.province,
			city: data.city,
			district: data.district,
			cityId: data.cityId,
			detail: data.detail,
			isDefault: data.isDefault,
			isReturn: 1,
		}).then((res) => {
			uni.showToast({
				title: res.message,
				icon: 'none'
			})
			getDetail()
		})
	}
	const dizhi = (e) => {
		//选择地址或者结算
		uni.$on('choseAddressGys', (data) => {
			// addressObj.value = data.address
			console.log(data);
			editAddress(data.address)
			uni.$off('choseAddressGys')
		})
		router.push({
			name: e,
			params: {}
		})
	}
</script>
<template>
	<view class="allContainer" v-if="flag=='no'">
		<view class="huanTit">
			<text class="title">请选择拒绝原因</text>
			<view class="itemForm r-flex-between-start">
				<text>拒绝原因</text>
				<view class="r-flex-center-center" @click="showYuanyin">
					<text style="color: #606266;">{{ jujueObj.yunayin?jujueObj.yunayin:'请选择' }}</text>
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>
		</view>
		<view class="reason">
			<text class="rTitle">补充拒绝说明和凭证</text>
			<view class="rDetail">
				<textarea v-model="jujueObj.buchong" placeholder="输入文本"></textarea>
				<u-upload :fileList="jujueObj.img" @afterRead="afterRead" @delete="deletePic" multiple :maxCount="5">
					<view style="width: 140rpx;height: 140rpx;border: 1rpx dashed #999;" class="r-flex-center-center">
						<u-icon name="plus"></u-icon>
					</view>
				</u-upload>
			</view>
		</view>
		<view class="btnContainer r-flex-around-center">
			<view class="bSon" @click="backPage">
				取消
			</view>
			<view class="bSon" @click="jujue">
				确定
			</view>
		</view>
	</view>
	<view class="allContainer" v-if="flag=='yes'">
		<view class="jiTit" v-if="orderDetail!=null&&orderDetail.orderInfoList[0].refund.refundType!=0">
			<text class="jTitle">退款信息</text>
			<view class="itemForm r-flex-between-start">
				<text class="if1">寄件地址</text>
				<view class="r-flex-between-center if2" v-if="orderDetail.orderInfoList[0].refund.contactsUser">
					<text style="color: #606266;">{{ orderDetail.orderInfoList[0].refund.contactsUser }}</text>
					<text style="color: #606266;">{{ orderDetail.orderInfoList[0].refund.contactsPhone }}</text>
				</view>
				<view style="color: #CB645E;font-weight: 600;" class="r-flex-center-center" v-else
					@click="dizhi('choseMineAddress')">
					新增地址 <u-icon name="arrow-right" color="#CB645E"></u-icon>
				</view>
			</view>
			<view class="addressMsg r-flex-end-center" v-if="orderDetail.orderInfoList[0].refund.contactsAddress">
				<text>{{ orderDetail.orderInfoList[0].refund.contactsAddress }}</text>
			</view>
		</view>
		<view class="reason2">
			<text class="rTitle2">退款说明</text>
			<view class="rDetail2">
				<textarea placeholder="输入文本" v-model="tongyiMsg"></textarea>
			</view>
		</view>
		<view class="btnContainer r-flex-around-center">
			<view class="bSon" @click="backPage">
				取消
			</view>
			<view class="bSon" @click="tongyi">
				确定
			</view>
		</view>
	</view>
</template>
<style lang="scss">
	page {
		background-color: #fafafa;
	}

	view {
		box-sizing: border-box;
	}

	.allContainer {
		padding: 16rpx 32rpx;
		padding-bottom: 200rpx;
	}

	.huanTit {
		background: #FFFFFF;
		box-shadow: 8rpx 8rpx 32rpx 0rpx rgba(0, 0, 0, 0.04);
		border-radius: 24rpx;
		border: 2rpx solid #FFFFFF;
		padding: 32rpx;
		margin-bottom: 16rpx;

		.title {
			font-weight: 600;
			font-size: 32rpx;
		}

		.itemForm {
			font-size: 28rpx;
			margin: 32rpx 0 0;
		}
	}

	.reason {
		background: #FFFFFF;
		box-shadow: 8rpx 8rpx 32rpx 0rpx rgba(0, 0, 0, 0.04);
		border-radius: 24rpx;
		border: 2rpx solid #FFFFFF;
		padding: 32rpx;
		margin-bottom: 16rpx;

		.rTitle {
			font-weight: 600;
			font-size: 32rpx;
		}

		.rDetail {
			margin-top: 32rpx;
			padding: 20rpx;
			border-radius: 16rpx;
			background-color: #F4F6F8;
		}
	}

	.btnContainer {
		margin-top: 66rpx;

		.bSon {
			width: 220rpx;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			font-size: 28rpx;
			color: #fff;
			background-color: #CB645E;
			border-radius: 80rpx;
		}
	}

	.jiTit {
		background: #FFFFFF;
		box-shadow: 8rpx 8rpx 32rpx 0rpx rgba(0, 0, 0, 0.04);
		border-radius: 24rpx;
		border: 2rpx solid #FFFFFF;
		padding: 32rpx;
		margin-bottom: 16rpx;

		.jTitle {
			font-weight: 600;
			font-size: 32rpx;
		}

		.itemForm {
			font-size: 28rpx;
			margin: 32rpx 0 0;

			.if1 {
				width: 120rpx;
			}

			.if2 {
				width: 490rpx;
				font-weight: 600;
			}
		}

		.addressMsg {
			width: 100%;
			font-size: 26rpx;

			text {
				margin-top: 20rpx;
				width: 490rpx;
			}
		}
	}

	.reason2 {
		background: #FFFFFF;
		box-shadow: 8rpx 8rpx 32rpx 0rpx rgba(0, 0, 0, 0.04);
		border-radius: 24rpx;
		border: 2rpx solid #FFFFFF;
		padding: 32rpx;
		margin-bottom: 16rpx;

		.rTitle2 {
			font-weight: 600;
			font-size: 32rpx;
		}

		.rDetail2 {
			margin-top: 32rpx;
			padding: 20rpx;
			border-radius: 16rpx;
			background-color: #F4F6F8;
		}
	}
</style>